<template>
	<view :class="screen?'login-pwd container':'login-pwd'" ref="uv-back-top">
		<uv-navbar v-if="!screen" title="登录" @leftClick="leftClick" leftIconSize="0px" :placeholder="true"></uv-navbar>
		<view class="login-pwd_content">
			<uv-row customStyle="margin-bottom: 0px;">
				<uv-col span="4"></uv-col>
				<uv-col span="4" align="center">
					<uv-image src="../../static/logo.svg" width="100px" height="100px" align="center">
						<template v-slot:error>
							<view style="font-size: 48rpx; background-color: rgba(0, 0, 0, 0);">{{appName}}</view>
						</template>
					</uv-image>
				</uv-col>
				<uv-col span="4"></uv-col>
			</uv-row>
			<uv-form labelPosition="top" :model="model1" :rules="rules" ref="form">
				<uv-form-item label="登录账号" prop="username" label-width="100px" :customStyle="{fontWeight: 'bold',}">
					<uv-input placeholder="请输入手机号或邮箱" v-model="model1.username" border="surround" clearable>
					</uv-input>
				</uv-form-item>
				<uv-form-item label="登录密码" prop="password" label-width="100px" :customStyle="{fontWeight: 'bold',}">
					<uv-input placeholder="请输入登录密码" border="surround" v-model="model1.password" password></uv-input>
				</uv-form-item>
				<uv-text v-if="!isPc" lineHeight="35" :customStyle="{fontWeight: 'bold',}" text="选择"></uv-text>
				<uv-checkbox-group v-if="!isPc" v-model="checkboxValue">
					<uv-checkbox :customStyle="{marginRight: '20px'}" v-for="(item, index) in checkboxList" :key="index"
						:label="item.label" :name="item.name"></uv-checkbox>
				</uv-checkbox-group>
				<uv-button type="primary" :customStyle="{fontWeight: 'bold',}" :text="'登 录'" shape="circle"
					@click="login"></uv-button>
				<uv-button :customStyle="{fontWeight: 'bold',border:'0px', borderRadius: '8px',backgroundColor:'#eee'}"
					text="验证码登录" @click="routed('index')"></uv-button>
			</uv-form>
			<uv-row justify="space-between" customStyle="margin-bottom: 10px">
				<uv-text align="center" :custom-style="{marginLeft:'10px',marginBottom:'10px',marginTop:'10px'}"
					type="info" text="修改密码" @click="routed('register','modify')"></uv-text>
				<uv-text align="center" :custom-style="{marginLeft:'10px',marginBottom:'10px',marginTop:'10px'}"
					type="info" text="注 册" @click="routed('register','')"></uv-text>
			</uv-row>
			<loginTips></loginTips>
		</view>
		<uv-toast ref="toast"></uv-toast>
	</view>
</template>

<script>
	import config from '@/common/config'
	import loginTips from './loginTips';
	import {
		login,
		postMenu,
		getMenu,
		getUser
	} from '@/common/api.js';
	export default {
		components: {
			// 注册组件
			loginTips,
		},
		data() {
			return {
				center: 'center',
				// 基本案列数据
				checkboxList: [{
						label: '记住密码',
						name: 'password'
					},
					// {
					// 	label: '自动登录',
					// 	name: 'login'
					// },
				],
				checkboxValue: ['password'],
				list: [{
					name: '手机登录',
				}, {
					name: '密码登录',
				}, {
					name: '第三方登录',
				}],
				appName: config.appName,
				// data
				nickname: '',
				code: '',
				model1: {
					username: '',
					nickname: '',
					password: '',
					code: '',
					userInfo: {
						name: 'uv-ui',
						sex: '',
					},
				},
				rules: {
					username: {
						type: 'string',
						required: true,
						message: '请填写账号',
						trigger: ['blur', 'change']
					},
					password: {
						type: 'string',
						required: true,
						message: '请填写密码',
						trigger: ['blur', 'change']
					},
				},
			}
		},
		computed: {},
		onReady() {
			if (this.vuex_password && this.vuex_username) {
				this.model1.username = this.aes_decrypt(this.vuex_username);
				this.model1.password = this.aes_decrypt(this.vuex_password);
			} else {
				var development = process.env.NODE_ENV === 'development';
				if (development) {
					this.model1.username = '13281822170';
					this.model1.password = '123456';
				}
			}
			this.$uv.vuex('vuex_token', '');
			//onReady 为uni-app支持的生命周期之一
			this.$refs.form.setRules(this.rules);
		},
		onLoad(e) {
			if (e.goback) {
				uni.$uv.vuex('goback', e.goback);
			}
			if (e.inviteCode) {
				uni.$uv.vuex('inviteCode', e.inviteCode);
			}
		},
		methods: {
			login() {
				var that = this;
				uni.$uv.toast("登录中...");
				// 发出post，假设需要带上token
				// 如果有错误，会在catch中返回报错信息数组，校验通过则在then中返回true
				this.$refs.form.validate().then(res => {
					let record = that.checkboxValue.includes('password'.toLowerCase());
					if (record) {
						that.$uv.vuex('vuex_username', this.aes_encrypt(that.model1.username));
						that.$uv.vuex('vuex_password', this.aes_encrypt(that.model1.password));
					}
					login({
						username: that.model1.username,
						password: that.model1.password,
					}).then(e => {
						// console.log(e);
						that.$refs.toast.show({
							message: '登录成功！',
						})
						that.$uv.vuex('vuex_token', that.aes_encrypt(e.token));
						that.$uv.vuex('refreshToken', that.aes_encrypt(e.refreshToken));
						setTimeout(function() {
							that.getuser();
						}, 1000)
						that.routes(this.goback);
					}).catch(e => {
						that.$refs.toast.show({
							message: '登录失败！',
						})
						console.log(e);
					})
				}).catch(errors => {
					that.$refs.toast.show({
						icon: 'error',
						message: '校验失败'
					})
				})

			},
			getuser() {
				var that = this;
				if (this.vuex_token) {
					getUser({
						custom: {
							auth: true,
							catch: false,
						}
					}).then(e => {
						that.$uv.vuex('vuex_user', e);
					}).catch(e => {})
				}
			},
			routed(url, type = '') {
				// 调用 goback recoil
				uni.$uv.route({
					url: 'pages/login/' + url,
					params: {
						type: type,
					}
				});
			},
			routes(url) {
				// 调用
				uni.$uv.route({
					url: url || config.indexUrl.replace(/^\//, ''),
				});
			},
		}
	}
</script>

<style scoped lang="scss">
	.login-pwd {
		// width: calc(100% - 20px);
		// background-image: url(../../static/3.jpg);
		background-position: center center;
		background-repeat: no-repeat;
		background-attachment: fixed;
		background-size: cover;
		height: calc(100vh - 44px);
		margin: 0px;
		padding: 5px 10px 10px 10px;


		.login-pwd_content {
			margin-bottom: 20px;

			.uv-text {
				font-weight: bold;
			}

			.uv-input {
				padding: 10px;
				margin-bottom: 5px;
				border-radius: 15px;
				background-color: #fff;
			}

			::v-deep .uv-button {
				margin-top: 20px;
				background-color: #69C0FF;
			}

			.uv-button {
				border-radius: 50px;
			}

			.grid-text {
				font-size: 12px;
				padding: 10rpx 0 20rpx 0rpx;
				/* #ifndef APP-PLUS */
				box-sizing: border-box;
				/* #endif */
			}
		}

	}

	.container {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100vh;
	}
</style>